import { Card, Modal, Avatar, Divider, Button } from "antd";
import { UserOutlined } from '@ant-design/icons';
import React, { useEffect, useState, useCallback, useImperativeHandle } from "react";
import style from "./scss/custDetail.module.scss"
/**
 * @description 客户详情
 * @author 韩
 */
const CustDetail = ({ onRef, }) => {
    const [open, setOpen] = useState(false);
    const [data, setData] = useState({});
    useEffect(() => {
        getDetail();
    }, [])
    /**@description 获取详情 */
    const getDetail = async () => {
    }


    useImperativeHandle(onRef, () => ({
        open: ({ type = "open", record = Object }) => {
            setOpen(true)
        }
    }))

    const onCancel = () => {
        setOpen(false);
        setData({})
    }

    return (
        <Modal
            title="客户详情"
            open={open}
            onCancel={onCancel}
            width={"80%"}
            centered
            destroyOnClose
            footer={null}
        >
            <div
                className={style.custDetail}
            >

                <div className="left">

                </div>
                <div className="right">

                    <div className="header">
                        <div className="top-bar">
                            <span className="updateTime">数据更新时间：2024-11-25 19:22:44</span>
                        </div>
                        <div
                            className="cust-detail-card"
                        >
                            <div className="card-item1">
                                <Avatar className="head-image" size={64} icon={<UserOutlined />} />
                                <Button type="link">修改头像</Button>
                            </div>
                            <div className="card-item2">
                                <div className="custBaseInfo">
                                    <span className="custName">张三</span>
                                    <span className="custPhone">13344433444</span>
                                </div>
                                <div className="action">
                                    <Button type="link">重置密码</Button>
                                </div>
                            </div>
                        </div>
                    </div>
                    {/* 信息模块 */}
                    <div className="baseInfo">
                        <Divider orientation="left">基本信息</Divider>
                        <div className="base-info-item">
                            <span className="label">姓名：</span>
                            <span className="value">张三</span>
                        </div>
                        <div className="base-info-item">
                            <span className="label">性别：</span>
                            <span className="value">男</span>
                        </div>
                        <div className="base-info-item">
                            <span className="label">手机号：</span>
                            <span className="value">13334433333</span>
                        </div>
                        <div className="base-info-item">
                            <span className="label">国籍：</span>
                            <span className="value">中国</span>
                        </div>
                        <div className="base-info-item">
                            <span className="label">工作地：</span>
                            <span className="value">中国</span>
                        </div>
                        <div className="base-info-item">
                            <span className="label">职务：</span>
                            <span className="value">中国</span>
                        </div>
                        <div className="base-info-item">
                            <span className="label">座机号：</span>
                            <span className="value">中国</span>
                        </div>
                        <div className="base-info-item">
                            <span className="label">邮箱：</span>
                            <span className="value">中国</span>
                        </div>
                    </div>
                </div>
            </div>
        </Modal>

    )
}
export default CustDetail;